<template>
  <div class="dog">
      <img :src="url" />
      <span @click='click' :style='{background:randomColor}'>{{ info }}</span>
  </div>
</template>

<script>
export default {
  props: ['info', 'url'],
  data() {
    return {
      // infos: '这是一只憨厚可爱的松狮犬',
      randomColor: ''
    }
  },
  methods: {
    click() {
      const r = ~~(Math.random()*256)
      const g = ~~(Math.random()*256)
      const b = ~~(Math.random()*256)
      this.$emit('like', this.info)
      this.randomColor = `rgb(${r},${g},${b})`
      console.log(this.randomColor);
    },
  }
}
</script>

<style scoped>
.dog {
  display: flex;
  flex-direction: column;
  border: 1px solid #b2b2b2;
  width: 200px;
  height: 180px;
  text-align: center;
}
img {
  width: 200px;
  height: 150px;
}
span {
  height: 30px;
  line-height: 30px;
}
</style>
